<template>
  <div class="common-layout">
    <!-- 布局容器 -->
    <el-container>
      <el-header> vue3后台管理 </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 左侧导航 -->
          <el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
            <el-sub-menu :index="'/'+item.path"  v-for="item in list" :key="item.id">
              <template #title>{{item.authName}}</template>
              <el-menu-item :index="'/'+ele.path" v-for="ele in item.children" :key="ele.id">{{ele.authName}}</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 坑 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {useStore} from 'vuex'
const store = useStore()
const list =store.state.menuList

// console.log(list);
</script>
<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
}
</style>